<template>
  <div class="container">
    <el-card>
      <div class="top">
        <el-row type="flex" justify="space-between">
          <el-col :span="22"
            ><p class="title">说明：目前支持学科和关键字条件筛选</p></el-col
          >
          <el-col :span="2"
            ><el-button
              icon="el-icon-edit"
              type="success"
              size="small"
              @click="addexam"
              >新增试题</el-button
            ></el-col
          >
        </el-row>
      </div>

      <el-form
        :model="formdata"
        label-width="80px"
        label-position="right"
        :inline="true"
      >
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              v-model="formdata.subjectID"
              placeholder="请选择"
              @change="subchange"
            >
              <el-option
                v-for="item in suboptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="formdata.catalogID" placeholder="请选择">
              <el-option
                v-for="item in catoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="formdata.tags" placeholder="请选择">
              <el-option
                v-for="item in tagoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="formdata.keyword"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="formdata.questionType" placeholder="请选择">
              <el-option
                v-for="item in quesoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="formdata.difficulty" placeholder="请选择">
              <el-option
                v-for="item in diffoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="formdata.direction" placeholder="请选择">
              <el-option
                v-for="item in direcoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="formdata.creatorID" placeholder="请选择">
              <el-option
                v-for="item in creaoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="formdata.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="formdata.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-select
              v-model="formdata.province"
              placeholder="请选择"
              style="width: 50%"
              @change="changeprovince"
            >
              <el-option v-for="item in provoptions" :key="item" :value="item">
              </el-option>
            </el-select>
            <el-select
              v-model="formdata.city"
              placeholder="请选择"
              style="width: 50%"
            >
              <el-option
                v-for="item in cityoptions"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="3">
          <el-button @click="clear">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-col>
      </el-form>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <el-alert
            :title="`数据共有${total}条`"
            type="info"
            show-icon
            :closable="false"
            style="margin: 0 0 15px"
          >
          </el-alert>
          <!-- 表格 -->
          <el-table :data="tabledata" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
            </el-table-column>
            <el-table-column prop="question" label="题干" width="200">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="220">
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewbtn(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.chkState != '待审核'"
                  @click="check(scope.row)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == '已发布'"
                  @click="update(scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="publish(scope.row)"
                  >{{
                    scope.row.publishState == "已发布" ? "下架" : "上架"
                  }}</el-button
                ><el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == '已发布'"
                  @click="delbtn(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row style="margin: 18px 0 0" type="flex" justify="center">
            <el-col :span="6">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pagesize"
                layout="  prev, pager, next,sizes, jumper"
                :total="total"
                background
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <el-alert
            :title="`数据共有${total}条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
          <!-- 表格 -->
          <el-table :data="tabledata" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
            </el-table-column>
            <el-table-column prop="question" label="题干" width="200">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="220">
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewbtn(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.chkState != '待审核'"
                  @click="check(scope.row)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == '已发布'"
                  @click="update(scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="publish(scope.row)"
                  >{{
                    scope.row.publishState == "已发布" ? "下架" : "上架"
                  }}</el-button
                ><el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == '已发布'"
                  @click="delbtn(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row style="margin: 18px 0 0" type="flex" justify="center">
            <el-col :span="6">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pagesize"
                layout="  prev, pager, next,sizes, jumper"
                :total="total"
                background
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <el-alert
            :title="`数据共有${total}条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
          <!-- 表格 -->
          <el-table :data="tabledata" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
            </el-table-column>
            <el-table-column prop="question" label="题干" width="200">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="220">
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewbtn(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.chkState != '待审核'"
                  @click="check(scope.row)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == '已发布'"
                  @click="update(scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="publish(scope.row)"
                  >{{
                    scope.row.publishState == "已发布" ? "下架" : "上架"
                  }}</el-button
                ><el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == '已发布'"
                  @click="delbtn(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row style="margin: 18px 0 0" type="flex" justify="center">
            <el-col :span="6">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pagesize"
                layout="  prev, pager, next,sizes, jumper"
                :total="total"
                background
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <el-alert
            :title="`数据共有${total}条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
          <!-- 表格 -->
          <el-table :data="tabledata" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
            </el-table-column>
            <el-table-column prop="question" label="题干" width="200">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="220">
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewbtn(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.chkState != '待审核'"
                  @click="check(scope.row)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == '已发布'"
                  @click="update(scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="publish(scope.row)"
                  >{{
                    scope.row.publishState == "已发布" ? "下架" : "上架"
                  }}</el-button
                ><el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == '已发布'"
                  @click="delbtn(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row style="margin: 18px 0 0" type="flex" justify="center">
            <el-col :span="6">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pagesize"
                layout="  prev, pager, next,sizes, jumper"
                :total="total"
                background
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <questionspreview
        :dialogVisible.sync="dialogVisible"
        :previewlist="previewlist"
      />
      <!-- 点击审核弹框 -->
      <el-dialog title="提示" :visible.sync="prevvisible" width="30%">
        <el-radio-group v-model="prevradio">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">拒绝</el-radio>
        </el-radio-group>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入审核意见"
          v-model="textarea"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="prevvisible = false">取 消</el-button>
          <el-button type="primary" @click="prevok">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import questionspreview from '../components/questions-preview'
import { simple as simplesub } from '../../api/hmmm/subjects'
import { simple as simpledirec } from '../../api/hmmm/directorys'
import { simple as simpletags } from '../../api/hmmm/tags'
import { simple as simplecrea } from '../../api/base/users'
import {
  choice,
  detail,
  choiceCheck,
  choicePublish,
  remove
} from '../../api/hmmm/questions'
import {
  questionType,
  difficulty,
  direction,
  chkType,
  publishType
} from '../../api/hmmm/constants'
import { provinces, citys } from '../../api/hmmm/citys'
export default {
  components: {
    questionspreview
  },
  data() {
    return {
      publishState: 1,
      id: '',
      textarea: '',
      prevradio: 1,
      prevvisible: false,
      previewlist: {},
      dialogVisible: false,
      chkType: '',
      tabledata: [],
      currentPage: 1,
      pagesize: 5,
      total: 0,
      activeName: 'first',
      formdata: {
        subjectID: '',
        catalogID: '',
        creatorID: '',
        direction: '',
        shortName: '',
        remarks: '',
        keyword: '',
        city: '',
        province: '',
        tags: '',
        questionType: '',
        difficulty: ''
      },
      suboptions: [],
      catoptions: [],
      tagoptions: [],
      quesoptions: questionType,
      diffoptions: difficulty,
      direcoptions: [],
      creaoptions: [],
      provoptions: provinces(),
      cityoptions: []
    }
  },
  created() {
    // this.getunchklist();
    this.getchoicelist()
    this.getSubList()
    this.getcrealist()
    const directionarr = []
    direction.forEach((item, index) => {
      const obj = { value: index + 1 }
      obj.label = item
      directionarr.push(obj)
    })
    // console.log(directionarr)
    this.direcoptions = directionarr
  },
  methods: {
    // 点击新增试题
    addexam() {
      this.$router.push('/questions/new')
    },
    // 点击修改
    update(row) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: row.id
        }
      })
    },
    // 点击删除
    delbtn(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: row.id })
          this.getchoicelist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击上架下架
    publish(row) {
      this.publishState = row.publishState == '已发布' ? 0 : 1
      this.$confirm(
        `你确定${row.publishState == '已发布' ? '下架' : '上架'}这道题目么`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          await choicePublish({ id: row.id, publishState: this.publishState })

          if (this.chkType === '') {
            this.getchoicelist()
          } else {
            this.getunchklist()
          }
          this.$message({
            type: 'success',
            message: '成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },

    // 点击审核确认
    async prevok() {
      if (this.textarea == '') {
        this.$message({
          message: '请输入审核意见',
          type: 'warning'
        })
        return
      }
      this.prevvisible = false
      // console.log(this.prevradio, this.textarea);
      const res = await choiceCheck({
        id: this.id,
        chkState: this.prevradio,
        chkRemarks: this.textarea
      })
      // console.log(res);
      // this.getchoicelist();
      if (this.chkType === '') {
        this.getchoicelist()
      } else {
        this.getunchklist()
      }
      this.textarea = ''
    },
    // 点击审核
    check(row) {
      this.id = row.id
      this.prevvisible = true
    },
    // 点击预览
    async previewbtn(row) {
      this.dialogVisible = true
      const res = await detail({ id: row.id })
      console.log(res.data)
      this.previewlist = res.data
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      if (tab.index == 1) {
        this.chkType = 0
        this.getunchklist()
      } else if (tab.index == 2) {
        this.chkType = 1
        this.getunchklist()
      } else if (tab.index == 3) {
        this.chkType = 2
        this.getunchklist()
      } else if (tab.index == 0) {
        this.getchoicelist()
      }
    },
    // 得到待审核列表
    async getunchklist() {
      // this.chkType = 0;
      const res = await choice({
        page: this.currentPage,
        pagesize: this.pagesize,
        chkState: this.chkType
      })
      // console.log(res);
      res.data.items.forEach((item) => {
        item.addDate = this.formate(item.addDate)
        item.questionType = this.formateques(item.questionType)
        item.difficulty = this.formatediff(item.difficulty)
        item.chkState = this.formatechk(item.chkState)
        item.publishState = this.formatepub(item.publishState)
      })
      // console.log(res);
      this.tabledata = res.data.items
      this.total = res.data.counts
    },
    // 得到精选列表
    async getchoicelist() {
      const res = await choice({
        page: this.currentPage,
        pagesize: this.pagesize
      })
      // console.log(res);
      res.data.items.forEach((item) => {
        item.addDate = this.formate(item.addDate)
        item.questionType = this.formateques(item.questionType)
        item.difficulty = this.formatediff(item.difficulty)
        item.chkState = this.formatechk(item.chkState)
        item.publishState = this.formatepub(item.publishState)
      })
      // console.log(res);
      this.tabledata = res.data.items
      this.total = res.data.counts
    },

    // 发布状态格式化
    formatepub(str) {
      let pub = ''
      publishType.forEach((item) => {
        if (str == item.value - 1) {
          pub = item.label
          // console.log(1);
        }
      })
      return pub
    },
    // 审核格式化
    formatechk(str) {
      let chk = ''
      chkType.forEach((item) => {
        if (str == item.value - 1) {
          chk = item.label
        }
      })
      return chk
    },
    // 难度格式化
    formatediff(str) {
      let diff = ''
      this.diffoptions.forEach((item) => {
        if (str == item.value) {
          diff = item.label
        }
      })
      return diff
    },
    // 题型格式化
    formateques(str) {
      let ques = ''
      this.quesoptions.forEach((item) => {
        if (str == item.value) {
          ques = item.label
        }
      })
      return ques
    },
    // 时间格式化
    formate(string) {
      return string.replace(/T|\.000Z/g, ' ')
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getchoicelist()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getchoicelist()
    },
    async getSubList() {
      const res = await simplesub()
      this.suboptions = res.data
      // console.log(res)
    },
    async getcatolist() {
      const res = await simpledirec({ subjectID: this.formdata.subjectID })
      this.catoptions = res.data
      // console.log(res);
    },
    async gettaglist() {
      const res = await simpletags({ subjectID: this.formdata.subjectID })
      this.tagoptions = res.data
      // console.log(res);
    },
    async getcrealist() {
      const res = await simplecrea()
      // console.log(res.data);
      const crearr = []
      res.data.forEach((item, index) => {
        const obj = { value: index + 1 }
        obj.label = item.username
        crearr.push(obj)
      })
      // console.log(crearr)
      this.creaoptions = crearr
    },
    subchange() {
      this.getcatolist()
      this.gettaglist()
    },
    changeprovince() {
      this.cityoptions = citys(this.formdata.province)
    },
    // 点击搜索
    async search() {
      const res = await choice({
        ...this.formdata,
        page: this.currentPage,
        pagesize: this.pagesize
      })
      // console.log(this.formdata);
      res.data.items.forEach((item) => {
        item.addDate = this.formate(item.addDate)
        item.questionType = this.formateques(item.questionType)
        item.difficulty = this.formatediff(item.difficulty)
        item.chkState = this.formatechk(item.chkState)
        item.publishState = this.formatepub(item.publishState)
      })
      this.tabledata = res.data.items
      this.total = res.data.counts
      this.activeName = 'first'
      // console.log(res);
      // this.total = res.data.counts;
    },
    clear() {
      this.formdata = {
        subjectID: '',
        catalogID: '',
        creatorID: '',
        direction: '',
        shortName: '',
        remarks: '',
        keyword: '',
        city: '',
        province: '',
        tags: '',
        questionType: '',
        difficulty: ''
      }
      this.getchoicelist()
    }
  }
}
</script>

<style scoped>
::v-deep .el-radio-group {
  margin-bottom: 20px;
}
.container {
  padding: 20px;
}
::v-deep .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.title {
  color: rgb(201, 106, 106);
  font-size: 12px;
  margin: 0;
}
.top {
  margin-bottom: 10px;
}
::v-deep .el-form {
  overflow: hidden;
}
::v-deep .el-form-item {
  margin-right: 0 !important;
  width: 100%;
}
::v-deep .el-form-item__label {
  position: absolute;
}
::v-deep .el-form-item__content {
  width: 100%;
  padding-left: 75px;
}
::v-deep .el-select,
::v-deep .el-input_inner {
  width: 100%;
}
</style>
